<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <link rel="stylesheet" href="./static/element-plus/index.css" />
  </head>

  <body>
    <div id="app">
      <el-header>
        <el-row>
          <el-col :span="4" style="height: 60px">
            <img src="./static/images/logo.png" />
            <h1 style="padding: 0 20px">技术社区</h1>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-menu mode="horizontal" :ellipsis="false">
              <el-menu-item index="0">首页</el-menu-item>
              <el-menu-item index="1">文章</el-menu-item>
              <el-menu-item index="2">课程</el-menu-item>
              <el-menu-item index="3">商城</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-input placeholder="请输入关键字" />
          </el-col>
          <el-col :span="4">
            <el-link type="primary">登录</el-link>
            <el-link type="primary">注册</el-link>
          </el-col>
        </el-row>
      </el-header>
      <el-container class="main">
        <el-main>
          <div style="width: 480px; margin: 0 auto">
            <h2>登录</h2>
            <el-form :model="form">
              <!-- 文本输入框 -->
              <el-form-item label="用户名：">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <!-- 密码输入框 -->
              <el-form-item label="密码：">
                <el-input type="password" v-model="form.password"></el-input>
              </el-form-item>
              <!-- 登录按钮 -->
              <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
      <el-footer>
        <el-row>
          <el-col :sm="24" :lg="8">
            <div>
              <img src="./static/images/logo.png" alt="logo" />
            </div>
            <div>
              <h1>技术社区</h1>
              <p>致力于构建一个专业的IT技术交流社区</p>
            </div>
          </el-col>
          <el-col :sm="24" :lg="8">
            <div>
              <el-button type="text">首页</el-button>
              <el-button type="text">文章</el-button>
              <el-button type="text">课程</el-button>
              <el-button type="text">商城</el-button>
            </div>
            <div>
              <el-button type="text">关于我们</el-button>
              <el-button type="text">使用手册</el-button>
              <el-button type="text">隐私条款</el-button>
              <el-button type="text">建议反馈</el-button>
            </div>
          </el-col>
          <el-col :sm="24" :lg="8">
            <div>
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：software@develop.com</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <p style="margin: 20px 0">软件开发工作室版权所有</p>
        </el-row>
      </el-footer>
    </div>
    <script>
      const App = {
        data() {
          return {
            form: {
              username: "",
              password: "",
            },
            dialogVisible: false,
          };
        },
        methods: {
          login() {
            this.dialogVisible = true;
            console.log("用户信息:", this.form);
          },
        },
      };
      Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>